<template>
	<view class="container" >
		<view class="time-desc">{{item.commentDto.createTime}}</view>
		<view class="head">
			<!-- <view class="head-avatar"></view> -->
			<image class="head-avatar" :src="item.userDto.avatarUrl" mode="scaleToFill" />

			<view class="head-rg">
				<view class="head-rg-title">{{ item.userDto.nickName }}</view>
				<view class="head-rg-label-wrap">
					<view class="head-rg-label">{{ item.commentDto.content }}</view>
				</view>
			</view>
      <!-- <image
      class="head-sufix"
			:src="item.facadePicture.split(',')[0]"
			style="display: block;"
			mode="scaleToFill"
      /> -->
		</view>
		<view class="line"></view>
		<view class="footer">
			<!-- <view class="footer-wrap">
				<image class="footer-icon" src="../../static/images/my/mobile.png" mode="scaleToFill"></image>
				<view class="footer-btn">打电话</view>
			</view>
			<view class="footer-divider"></view> -->
			<!-- <view @click="toComment" class="footer-wrap">
				<image class="footer-icon" src="../../static/images/my/comment.png" mode="scaleToFill"></image>
				<view class="footer-btn">给他留言</view>
			</view> -->
		</view>
		<show-add-comment-sheet v-if="showAddComment" ref="textarea1" :show="showAddComment" @close="() => { this.showAddComment = false }" :init-value="commentContent" @confirm="addComment" @change="changeComment"></show-add-comment-sheet>
	</view>
</template>
<script>
import { PostUtils } from '@/components/post_item/post_add_sell_dto';
import { CustomDict } from '../../components/custom_views/custom_dict'
import showAddCommentSheet from '@/PostPage/custom_views/show-add-comment-sheet.vue';
import { Api } from '../../api/api';
import check_utils from '../../components/custom_views/check_utils';

export default {
	options: {
		styleIsolation: 'shared'
	},
	name: 'userCommentItem',
	components: {
		showAddCommentSheet
	},
	props: {
		item: {
			type: Object,
			default: function () {
				return {};
			}
		},
		title: {
			type: String,
			default: 'TA通过转铺详情浏览了您的店铺'
		}
	},
	data() {
		return {
			showAddComment: false,
			commentContent: '',
			commentOperIndex: 0,
		}
	},
	methods: {
		changeComment(commentContent) {
			console.log('留言内容', commentContent)
			this.commentContent = commentContent
		},
		addComment() {
			let that = this
			console.log('留言的内容', this.commentContent)
			if (!this.commentContent || this.commentContent.length < 5) {
				uni.showToast({
					title: '留言内容至少需要5个汉字哦～',
					icon: "none"
				})
				return
			}
			this.showAddComment = false
			Api.CustRequestSubscribeMessage(
				() => {
					Api.CommentApi.addNew(
						that,
						that.item.id,
						that.item.userDto.userId,
						that.commentContent,
						0,
						0,
						(res)=>{
							if(res.code == 200){
								check_utils.showCustToast('留言成功')
							}else{
								check_utils.showCustToast(res.msg)
							}
							that.commentContent = ''
						},
						true
					)

					// Api.CommentApi.addFromDetail(that, {
					// 	id: that.item.id,
					// 	userId: that.item.userDto.userId
					// }, that.commentContent, 0, (res) => {
					// 	if (res.code == 200) {
					// 		check_utils.showCustToast('留言成功')
					// 		that.commentContent = ''
					// 	}
					// })
				},
				() => {

					Api.CommentApi.addNew(
						that,
						that.item.id,
						that.item.userDto.userId,
						that.commentContent,
						0,
						0,
						(res)=>{
							if(res.code == 200){
								check_utils.showCustToast('留言成功')
							}else{
								check_utils.showCustToast(res.msg)
							}
							that.commentContent = ''
						},
						true
					)

					// Api.CommentApi.addFromDetail(that, {
					// 	id: that.item.id,
					// 	userId: that.item.userDto.userId
					// }, that.commentContent, 0, (res) => {
					// 	if (res.code == 200) {
					// 		check_utils.showCustToast('留言成功')
					// 		that.commentContent = ''
					// 	}
					// })

				}
			)
		},
		toComment() {
			console.log('显示留言窗口时')
			if(!PostUtils.canCommentOrContact(this.item)){
				return
			}
			this.showAddComment = true
			this.commentContent = ''
			this.$nextTick(() => {
				this.$refs.textarea1.focusInput();
			});
		},
	},
	computed: {
		buyAcreage() {
			if (this.item.upperAcreage >= 10000) {
				return '不限'
			} else {
				return this.item.lowerAcreage + '-' + this.item.upperAcreage
			}
		},
		buyRent() {
			return CustomDict.getRentDesc(this.item.lowerRent, this.item.upperRent)
		}
	}
}
</script>
<style scoped lang="scss">
@import url(../../static/css/base.css);

.container {
	border-radius: 8rpx;
	background: #FFFFFF;
	width: 686rpx;
    margin-bottom: 30rpx;
	padding: 20rpx 30rpx 10rpx 30rpx;
	margin: 0 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	.line{
		border-top: 1rpx solid #eee;
		width: 582rpx;
		height: 1px;
		margin: 0 auto;
	}
}

.time-desc {
	text-align: right;
	font-size: 24rpx;
	color: #999999;
	margin-bottom: 15rpx;
}

.head {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 32rpx;
	.head-avatar {
		width: 104rpx;
		height: 104rpx;
		box-sizing: border-box;
		// border: 1px solid #F8D247;
		display: block;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.head-rg {
		display: flex;
		flex-direction: column;
		flex: 1;
		.head-rg-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #000;
			margin-bottom: 15rpx;
		}

		.head-rg-label-wrap {
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			.head-rg-label {
				font-weight: 400;
				font-size: 24rpx;
				color: #9E9E9E
			}

			.head-rg-label-value {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-right: 18rpx;
			}

			.head-rg-label-rent {
				font-weight: 600;
				font-size: 32rpx;
				color: #EF2D2D
			}
		}
	}
  .head-sufix{
    display: block;
    width: 104rpx;
    height: 104rpx;
	border-radius: 8rpx;
  }
}

.divider {
	margin-left: 52rpx;
	margin-right: 52rpx;
	margin-top: 22rpx;
	border:1px solid #EEEEEE;
}

.footer {
	display: flex;
	flex-direction: row;

	.footer-wrap {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 22rpx;
		padding-bottom: 18rpx;

		.footer-icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 6rpx;
		}

		.footer-btn {
			margin-left: 6rpx;
			font-size: 24rpx;
			font-weight: 600;
			color: #666666;
		}
	}

	.footer-divider {
		height: 40rpx;
		margin-top: 20rpx;
		border-left: 1rpx solid #eee;
	}
}
</style>